<template>
  <div class="enemy-card" :class="[`rarity-${enemy.rarity}`, { 'is-boss': enemy.isBoss, 'is-selected': selected }]">
    <!-- 卡片背景效果 -->
    <div class="card-bg-effect"></div>
    
    <!-- 敌人头像 -->
    <div class="enemy-avatar">
      <img :src="enemyAvatar" :alt="enemy.name" @error="handleImageError" />
      
      <!-- 等级标识 -->
      <div class="level-badge">
        <span>Lv.{{ enemy.level }}</span>
      </div>
      
      <!-- BOSS标识 -->
      <div class="boss-badge" v-if="enemy.isBoss">
        <span>BOSS</span>
      </div>
      
      <!-- 稀有度星级 -->
      <div class="rarity-stars" v-if="enemy.rarity">
        <span v-for="n in enemy.rarity" :key="n" class="star">★</span>
      </div>
    </div>
    
    <!-- 敌人信息 -->
    <div class="enemy-info">
      <h3 class="enemy-name">{{ enemy.name }}</h3>
      <p class="enemy-type">{{ enemy.type }}</p>
      
      <!-- 属性条 -->
      <div class="attributes">
        <div class="attribute-item">
          <span class="attr-icon">⚔️</span>
          <span class="attr-label">攻击</span>
          <span class="attr-value">{{ formatNumber(enemy.attributes.attack) }}</span>
        </div>
        
        <div class="attribute-item">
          <span class="attr-icon">🛡️</span>
          <span class="attr-label">防御</span>
          <span class="attr-value">{{ formatNumber(enemy.attributes.defense) }}</span>
        </div>
        
        <div class="attribute-item">
          <span class="attr-icon">❤️</span>
          <span class="attr-label">生命</span>
          <span class="attr-value">{{ formatNumber(enemy.attributes.hp) }}</span>
        </div>
        
        <div class="attribute-item">
          <span class="attr-icon">⚡</span>
          <span class="attr-label">速度</span>
          <span class="attr-value">{{ formatNumber(enemy.attributes.speed) }}</span>
        </div>
      </div>
      
      <!-- 技能列表 -->
      <div class="skills" v-if="enemy.skills && enemy.skills.length > 0">
        <div class="skills-title">技能</div>
        <div class="skill-list">
          <span v-for="skill in enemy.skills" :key="skill" class="skill-tag">
            {{ skill }}
          </span>
        </div>
      </div>
      
      <!-- 特殊能力 (BOSS专用) -->
      <div class="special-abilities" v-if="enemy.isBoss && enemy.specialSkills">
        <div class="abilities-title">特殊能力</div>
        <div class="ability-list">
          <span v-for="ability in enemy.specialSkills" :key="ability" class="ability-tag">
            {{ ability }}
          </span>
        </div>
      </div>
    </div>
    
    <!-- 卡片操作按钮 -->
    <div class="card-actions" v-if="showActions">
      <button class="action-btn detail-btn" @click="showDetail">
        详情
      </button>
      <button class="action-btn challenge-btn" @click="challenge" v-if="enemy.isBoss">
        挑战
      </button>
    </div>
    
    <!-- 选中状态指示器 -->
    <div class="selection-indicator" v-if="selected">
      <span class="check-icon">✓</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnemyCard',
  props: {
    enemy: {
      type: Object,
      required: true,
      default: () => ({
        id: '',
        name: '未知敌人',
        type: '普通',
        level: 1,
        rarity: 1,
        isBoss: false,
        attributes: {
          attack: 0,
          defense: 0,
          hp: 0,
          speed: 0,
          critRate: 0,
          hitRate: 0,
          dodgeRate: 0
        },
        skills: [],
        specialSkills: [],
        avatar: ''
      })
    },
    selected: {
      type: Boolean,
      default: false
    },
    showActions: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'normal', // normal, small, large
      validator: value => ['small', 'normal', 'large'].includes(value)
    }
  },
  computed: {
    enemyAvatar() {
      if (this.enemy.avatar) {
        return this.enemy.avatar
      }
      
      // 根据敌人类型返回默认头像
      const avatarMap = {
        '新手山贼': '/static/images/enemies/bandit.png',
        '边境土匪': '/static/images/enemies/border_bandit.png',
        '部落战士': '/static/images/enemies/tribal_warrior.png',
        '森林野兽': '/static/images/enemies/forest_beast.png',
        '沙漠盗贼': '/static/images/enemies/desert_thief.png',
        '雪山怪物': '/static/images/enemies/snow_monster.png',
        '魔教弟子': '/static/images/enemies/demon_disciple.png',
        '皇城侍卫': '/static/images/enemies/imperial_guard.png',
        '天界仙兵': '/static/images/enemies/celestial_soldier.png'
      }
      
      return avatarMap[this.enemy.type] || '/static/images/enemies/default.png'
    }
  },
  methods: {
    // 格式化数字显示
    formatNumber(num) {
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M'
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K'
      }
      return num.toString()
    },
    
    // 处理图片加载错误
    handleImageError(event) {
      event.target.src = '/static/images/enemies/default.png'
    },
    
    // 显示详情
    showDetail() {
      this.$emit('show-detail', this.enemy)
    },
    
    // 挑战敌人
    challenge() {
      this.$emit('challenge', this.enemy)
    },
    
    // 点击卡片
    handleCardClick() {
      this.$emit('click', this.enemy)
    }
  }
}
</script>

<style scoped>
.enemy-card {
  position: relative;
  background: linear-gradient(135deg, #2a2a3e 0%, #1e1e2e 100%);
  border-radius: 15px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  min-width: 280px;
  max-width: 320px;
}

.enemy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* 稀有度边框颜色 */
.enemy-card.rarity-1 {
  border-color: #8e8e8e; /* 灰色 - 普通 */
}

.enemy-card.rarity-2 {
  border-color: #4CAF50; /* 绿色 - 精良 */
}

.enemy-card.rarity-3 {
  border-color: #2196F3; /* 蓝色 - 稀有 */
}

.enemy-card.rarity-4 {
  border-color: #9C27B0; /* 紫色 - 史诗 */
}

.enemy-card.rarity-5 {
  border-color: #FF9800; /* 橙色 - 传说 */
}

.enemy-card.is-boss {
  border-color: #f44336; /* 红色 - BOSS */
  background: linear-gradient(135deg, #3e2a2a 0%, #2e1e1e 100%);
}

.enemy-card.is-selected {
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.card-bg-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.enemy-avatar {
  position: relative;
  text-align: center;
  margin-bottom: 15px;
}

.enemy-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
  transition: all 0.3s ease;
}

.enemy-card:hover .enemy-avatar img {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.level-badge {
  position: absolute;
  top: -5px;
  right: 10px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #1a1a2e;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.boss-badge {
  position: absolute;
  top: -5px;
  left: 10px;
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: pulse 2s infinite;
}

.rarity-stars {
  margin-top: 5px;
}

.star {
  color: #ffd700;
  font-size: 14px;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.enemy-info {
  text-align: center;
}

.enemy-name {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 5px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.enemy-type {
  color: #cccccc;
  font-size: 14px;
  margin: 0 0 15px 0;
}

.attributes {
  margin-bottom: 15px;
}

.attribute-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 12px;
}

.attr-icon {
  font-size: 14px;
  margin-right: 5px;
}

.attr-label {
  color: #cccccc;
  flex: 1;
  text-align: left;
  margin-left: 5px;
}

.attr-value {
  color: #ffd700;
  font-weight: bold;
}

.skills, .special-abilities {
  margin-bottom: 15px;
}

.skills-title, .abilities-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.skill-list, .ability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.skill-tag, .ability-tag {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.ability-tag {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border-color: rgba(244, 67, 54, 0.3);
}

.card-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 15px;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.detail-btn {
  background: rgba(33, 150, 243, 0.2);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.detail-btn:hover {
  background: rgba(33, 150, 243, 0.3);
  transform: translateY(-2px);
}

.challenge-btn {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: white;
}

.challenge-btn:hover {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
}

.selection-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  background: #ffd700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.3s ease;
}

.check-icon {
  color: #1a1a2e;
  font-weight: bold;
  font-size: 14px;
}

/* 尺寸变体 */
.enemy-card.size-small {
  min-width: 200px;
  max-width: 240px;
  padding: 10px;
}

.enemy-card.size-small .enemy-avatar img {
  width: 60px;
  height: 60px;
}

.enemy-card.size-small .enemy-name {
  font-size: 16px;
}

.enemy-card.size-large {
  min-width: 350px;
  max-width: 400px;
  padding: 20px;
}

.enemy-card.size-large .enemy-avatar img {
  width: 100px;
  height: 100px;
}

.enemy-card.size-large .enemy-name {
  font-size: 20px;
}

/* 动画效果 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .enemy-card {
    min-width: 250px;
    max-width: 280px;
    margin: 5px;
    padding: 12px;
  }
  
  .enemy-avatar img {
    width: 70px;
    height: 70px;
  }
  
  .enemy-name {
    font-size: 16px;
  }
  
  .attribute-item {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .action-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
}
</style>